import { EllipsisOutlined, PlusOutlined } from "@ant-design/icons";
import { ProTable, TableDropdown ,ProFormText} from "@ant-design/pro-components";
import { Button, ConfigProvider, Dropdown, Space, Tag, theme } from "antd";
import { useRef } from "react";
import type { ActionType } from "@ant-design/pro-components";



const columns = [
   {
      dataIndex: "index",
      valueType: "indexBorder",
      width: 48,
   },
   {
      title: "模糊查询",
      dataIndex: "keyword",
      hideInTable: true,
      renderFormItem: (_, config: any) => (
         <ProFormText
            name={config.dataIndex}
            label={config.title}
            placeholder="账号/手机号/昵称"
         />
      ),
   },
   {
      title: "标题",
      dataIndex: "title",
      copyable: true,
      ellipsis: true,
      tip: "标题过长会自动收缩",
      formItemProps: {
         rules: [
            {
               required: true,
               message: "此项为必填项",
            },
         ],
      },
   },
   {
      disable: true,
      title: "状态",
      dataIndex: "state",
      filters: true,
      onFilter: true,
      ellipsis: true,
      valueType: "select",
      valueEnum: {
         all: { text: "超长".repeat(50) },
         open: {
            text: "未解决",
            status: "Error",
         },
         closed: {
            text: "已解决",
            status: "Success",
            disabled: true,
         },
         processing: {
            text: "解决中",
            status: "Processing",
         },
      },
   },

   {
      title: "创建时间",
      key: "showTime",
      dataIndex: "created_at",
      valueType: "date",
      sorter: true,
      hideInSearch: true,
   },

   {
      title: "操作",
      valueType: "option",
      key: "option",
      render: (text, record, _, action) => [
         <a
            key="editable"
            onClick={() => {
               action?.startEditable?.(record.id);
            }}>
            编辑
         </a>,
         <a
            href={record.url}
            target="_blank"
            rel="noopener noreferrer"
            key="view">
            查看
         </a>,
         <TableDropdown
            key="actionGroup"
            onSelect={() => action?.reload()}
            menus={[
               { key: "copy", name: "复制" },
               { key: "delete", name: "删除" },
            ]}
         />,
      ],
   },
];

export default () => {
   const actionRef = useRef<ActionType>(null);
   const themeConfig = {
      token: {
         colorPrimary: "red",
         borderRadius: 4,
      },
      algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
   };
   return (
      <div
         style={{
            backgroundColor: "hsl(218,22%,7%)",
         }}>
         <ConfigProvider theme={themeConfig}>
            <ProTable
               columns={columns}
               actionRef={actionRef}
               cardBordered
               request={async (params, sort, filter) => {
                  console.log(sort, filter);
                  return {
                     data: [{ title: "几把",key:1 }],
                     success: true,
                  };
               }}
               editable={{
                  type: "multiple",
               }}
               columnsState={{
                  persistenceKey: "pro-table-singe-demos",
                  persistenceType: "localStorage",
                  onChange(value) {
                     console.log("value: ", value);
                  },
               }}
               rowKey="id"
               search={{
                  labelWidth: "auto",
               }}
               // options={{
               //    setting: {
               //       listsHeight: 400,
               //    },
               // }}
               options={false} //隐藏工具栏
               form={{
                  // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
                  syncToUrl: (values, type) => {
                     if (type === "get") {
                        return {
                           ...values,
                           created_at: [values.startTime, values.endTime],
                        };
                     }
                     return values;
                  },
               }}
               pagination={{
                  pageSize: 10,
                  hideOnSinglePage:true,
                  showSizeChanger: false,//是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
                  onChange: page => console.log(page),
               }}
               dateFormatter="string"
               headerTitle="高级表格"
               toolBarRender={() => [
                  <Button key="button" icon={<PlusOutlined />} type="primary">
                     新建
                  </Button>,
                  <Dropdown
                     key="menu"
                     menu={{
                        items: [
                           {
                              label: "1st item",
                              key: "1",
                           },
                           {
                              label: "2nd item",
                              key: "1",
                           },
                           {
                              label: "3rd item",
                              key: "1",
                           },
                        ],
                     }}>
                     <Button>
                        <EllipsisOutlined />
                     </Button>
                  </Dropdown>,
               ]}
            />
         </ConfigProvider>
      </div>
   );
};
